<template>
    <view :class="vuex_theme">
    	<!-- 标题组件 -->
		<!-- 内容 -->
		<view class="cu-card padding-bottom-xxl">
			<view class="cu-item shadow-warp margin-sm radius " v-for="(item, index) in address.list" :key="index"  @click="cardBtn(item.id)">
				<view class="flex">
					<view class="padding-sm " style="flex: 4;">
						<view class="flex text-bold align-center">
							<view class=" text-xl text-cut" style="width: 200rpx;">{{item.name}}</view>
							<view class="" style="display: inherit;">
								<view>
									<text class="margin-left-sm">
										{{item.mobile}}
									</text>
								</view>
								
								<view class="margin-left cu-tag main-bg  round sm  text-xxl" v-if="item.id == selectId">
								    <text class="text-sm">选择</text>
								</view>

							</view>
						</view>
						<view class="text-sm " style="width: 500rpx;">
							<view class="text-cut">{{item.province+item.city+item.area}}</view>
							<view class="text-cut">{{item.details}}</view>
						</view>
						
					</view>
					<view class="flex-sub radius">
						<view class="grid col-1 main-bg" style="border-top-right-radius: 8rpx;" @click="editAddress(item)">
							<view class="text-center margin-sm ">
								<text class="cuIcon-edit"></text>
							</view>
						</view>
						<view class="grid col-1 bg-red" style="border-bottom-right-radius: 8rpx;" @click="delBtn(index)">
							<view class="text-center margin-sm">
								<text class="cuIcon-delete"></text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="bottom-group padding text-center ">
				<button class="cu-btn main-bg margin-lr-sm round lg" @click="add()">
					<text class="text">添加新的地址</text>
				</button>
				
				<button class="cu-btn main-bg margin-lr-sm round lg" :class="selectId==0?'bg-grey ':'bg-main'" @click="selectBtn()">
					<text class="text">确认选择</text>
				</button>
			</view>
		</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                loading: true,
                loadStatus: 'nomore',
                scrollTop: 0,
                selectId:0,
                selectIndex:0,
                address: {
                    total: 0,
                    list: []
                }

            };
        },
        onShow() {
            //#ifdef APP-VUE
            // 初始化导航状态栏颜色
            this.$common.initBarColor();
            //#endif
            
			var that = this;
			this.$api.request('/api/moyi/address/getList', {
				
			}, this.$store.state.token, function(res_arr){
				that.showLoad = false;
				if (res_arr.code) {
					var res = res_arr.data;
					that.address.list = res.list;
					that.address.total = res.total;
				}
			});
			
   //          this.$u.post('address/getList', {}).then(res => {
   //          	if (res.list) {
   //          		this.address.list = res.list;
   //          		this.address.total = res.total;
   //          	}
   //          	this.showLoad = false;
   //          });
			
			
			
        },
        onLoad(e) {
            
            if(e.id){
                this.selectId = e.id;
            }
        },
        methods: {
			add(){
			
				//pages/user/address/add
				this.$u.route({
				    url:'/pages/user/address/add'
				});
			},
            selectBtn(){
                if(this.selectId){
                    for (let i = 0; i < this.address.list.length; i++) {
                        if(this.address.list[i].id==this.selectId){
                            uni.$emit('selectAddress',this.address.list[i]);
                            uni.navigateBack({});
                        }
                    }
                }
            },
            cardBtn(id){
                this.selectId = id;
            },
            editAddress(val){
				console.log(val)
                this.$u.route({
                    url:'/pages/user/address/edit',
                    params:{
                        id:val.id,
                        name: val.name,
                        mobile: val.mobile,
                        default: val.default,
						province: val.province,
						city: val.city,
                        area: val.area,
						details: val.details,
						code: val.code
                        // address: val.address,
                        // areas:val.areas,
                    }
                });
            },
            addAddress(){
                // console.log('this.address.total',this.address);
                if(this.address.total<10){
                    this.$u.route({
                        url:'/pages/user/address/add'
                    });
                }else{
                    this.$common.showToast('地址以达到上线了哦');
                }
            },
            delBtn(index){
                // console.log('delBtn')
                this.$u.throttle(() => {
                    let id = this.address.list[index].id;
                    // this.$u.post('user/delAddress', {
                    this.$u.post('Address/del', {
                        id: id,
                    }).then(res => {
                        if(res){
                            this.address.total --;
                            this.address.list.splice(index, 1);
                            if(this.address.list.length){
                                if(id == this.selectId){
                                    this.selectId = this.address.list[0].id;
                                }
                            }else{
                               this.selectId = 0;
                            }
                            this.$common.showToast('删除成功');
                        }
                    });
                }, 500);
            }
			
			
			
        }
    };
</script>

<style lang="less">
    .limit-wh {
        width: 460rpx;
        height: 10rpx;
    }

    .title-cut {
        width: 460rpx;
        height: 80rpx;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
</style>
<style lang="scss">
	@import '@/moyi-ui/form.scss';
</style>